<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen"/>


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen"/>

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>


<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

<article class="prevnext">
    <a class="" href="01.Sample-Boxed.html">01</a>
    <a class="" href="02.Sample-Fullwidth.html">02</a>
    <a class="" href="03.Sample-FullScreen.html">03</a>
    <a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
    <a class="" href="05.Sample-Aligns.html">05</a>
    <a class="" href="06.Sample-AlignForce.html">06</a>
    <a class="" href="07.Sample-Videos.html">07</a>
    <a class="active" href="08.Sample-NavigationStyle.html">08</a>
    <a class="" href="09.Sample-Api.html">09</a>
    <a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
    <a class="" href="11.Sample-Shuffle.html">11</a>
    <a class="" href="12.Sample-Backgrounds.html">12</a>
    <a class="" href="13.Sample-HideCaptions.html">13</a>
    <a class="" href="14.Sample-KenBurns.html">14</a>
    <a class="" href="15.Sample-VideoBG.html">15</a>
    <a class="" href="16.Caption-ShowDown.html">16</a>
    <a class="" href="17.Sample-DottedBG.html">17</a>
    <a class="" href="18.Sample-NewCaptionEffects.html">18</a></article>


<!-- HEADER -->
<header>
    <section class="container">
        <article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq">
            <div class="logo"></div>
        </a></article>
        <div class="button-holder"><a
                href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank"
                class="button"><strong>BUY NOW</strong></a></div>
        <div style="clear:both"></div>
    </section>
</header> <!-- END OF HEADER -->


<article class="boxedcontainer">

    <div style="float:left;width:50%;">

        <div class="tp-banner-container">
            <div id="slider1" class="tp-banner">
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>


                </ul>

            </div>
        </div>
    </div>

    <div style="float:left;width:50%;">

        <div class="tp-banner-container">
            <div id="slider2" class="tp-banner">
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg2.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg1.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg4.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg3.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>


                </ul>

            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div style="float:left;width:50%;">

        <div class="tp-banner-container">
            <div id="slider3" class="tp-banner">
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>


                </ul>

            </div>
        </div>
    </div>

    <div style="float:left;width:50%;">

        <div id="slider4container" class="tp-banner-container">
            <div id="slider4" class="tp-banner">
                <ul>
                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg4.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg3.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">

                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg1.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>

                    <!-- SLIDE  -->
                    <li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="images/bg2.jpg">
                        <!-- MAIN IMAGE -->
                        <img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                             data-bgrepeat="no-repeat">
                    </li>


                </ul>

            </div>
        </div>
    </div>
    <div class="clear"></div>


    <!-- THE SCRIPT INITIALISATION -->
    <!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery('#slider1').revolution(
                {
                    delay: 4000,
                    startwidth: 1170,
                    startheight: 500,

                    hideThumbs: 200,

                    thumbWidth: 100,
                    thumbHeight: 50,
                    thumbAmount: 5,

                    navigationType: "bullet",
                    navigationArrows: "solo",

                    navigationStyle: "round",


                    navigationHAlign: "center",
                    navigationVAlign: "bottom",
                    navigationHOffset: 0,
                    navigationVOffset: 20,

                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "bottom",
                    soloArrowLeftHOffset: 20,
                    soloArrowLeftVOffset: 20,

                    soloArrowRightHalign: "right",
                    soloArrowRightValign: "bottom",
                    soloArrowRightHOffset: 20,
                    soloArrowRightVOffset: 20,

                    touchenabled: "on",
                    onHoverStop: "on"

                });

            jQuery('#slider2').revolution(
                {
                    delay: 4000,
                    startwidth: 1170,
                    startheight: 500,

                    hideThumbs: 200,

                    thumbWidth: 150,
                    thumbHeight: 50,
                    thumbAmount: 3,

                    navigationType: "thumb",
                    navigationArrows: "none",

                    navigationStyle: "round",


                    navigationHAlign: "center",
                    navigationVAlign: "bottom",
                    navigationHOffset: 0,
                    navigationVOffset: 20,

                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "center",
                    soloArrowLeftHOffset: 20,
                    soloArrowLeftVOffset: 20,

                    soloArrowRightHalign: "right",
                    soloArrowRightValign: "center",
                    soloArrowRightHOffset: 20,
                    soloArrowRightVOffset: 20,

                    touchenabled: "on",
                    onHoverStop: "on"

                });

            jQuery('#slider3').revolution(
                {
                    delay: 4000,
                    startwidth: 1170,
                    startheight: 500,

                    hideThumbs: 200,

                    thumbWidth: 100,
                    thumbHeight: 50,
                    thumbAmount: 5,

                    navigationType: "bullet",
                    navigationArrows: "none",

                    navigationStyle: "round",


                    navigationHAlign: "left",
                    navigationVAlign: "top",
                    navigationHOffset: 30,
                    navigationVOffset: 30,

                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "bottom",
                    soloArrowLeftHOffset: 20,
                    soloArrowLeftVOffset: 20,

                    soloArrowRightHalign: "right",
                    soloArrowRightValign: "bottom",
                    soloArrowRightHOffset: 20,
                    soloArrowRightVOffset: 20,

                    touchenabled: "on",
                    onHoverStop: "on"

                });

            jQuery('#slider4').revolution(
                {
                    delay: 4000,
                    startwidth: 1170,
                    startheight: 500,

                    hideThumbs: 300,

                    thumbWidth: 150,
                    thumbHeight: 50,
                    thumbAmount: 3,

                    navigationType: "none",
                    navigationArrows: "solo",

                    navigationStyle: "round",


                    navigationHAlign: "center",
                    navigationVAlign: "bottom",
                    navigationHOffset: 0,
                    navigationVOffset: 20,

                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "bottom",
                    soloArrowLeftHOffset: 20,
                    soloArrowLeftVOffset: 20,

                    soloArrowRightHalign: "left",
                    soloArrowRightValign: "bottom",
                    soloArrowRightHOffset: 70,
                    soloArrowRightVOffset: 20,

                    touchenabled: "on",
                    onHoverStop: "on"

                });


        });	//ready

    </script>

    <!-- END REVOLUTION SLIDER -->


</article><!-- Content End -->


<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

<section class="container">
    <h2>Change Navigation Style via CSS</h2>
    <p>You can turn on / off independent the Arrows and Bullets in the Slider. You can use Bullets or Thumbnails. You
        can set independent the position of arrows, thumbnails and bullets.</p>
    <p>Since Slider Revolution has a few prepared style of Thumbnails, bullets and Arrows, you dont need to style them
        at all. However in some cases you wish to have your own styled navigation buttons.For this we show you how to do
        so:</p>

    <div style="width:100%;height:20px"></div>
    <h3>Change the the Navigation via Options</h3>
    <pre>
		&lt;script type="text/javascript"&gt;

		var revapi;

			jQuery(document).ready(function() {

			   revapi = jQuery('.tp-banner').revolution(
				{
					delay:9000,
					startwidth:1170,
					startheight:500,

					hideThumbs:200,

					thumbWidth:100,
					thumbHeight:50,
					thumbAmount:3,

					navigationType:"bullet",     <span
            style="color:#2980b9 !important">// use none, bullet or thumb</span>
					navigationArrows:"solo",     <span style="color:#2980b9 !important">// nexttobullets, solo (old name verticalcentered), none</span>

					navigationStyle:"round",     <span style="color:#2980b9 !important">// round, square, navbar, round-old, square-old, navbar-old </span>


					navigationHAlign:"center",   <span style="color:#2980b9 !important">// left,center,right</span>
					navigationVAlign:"bottom",   <span style="color:#2980b9 !important">// top,center,bottom</span>
					navigationHOffset:0,		 <span style="color:#2980b9 !important">// offset position from aligned position</span>
					navigationVOffset:0,		 <span style="color:#2980b9 !important">// offset position from aligned position</span>

					soloArrowLeftHalign:"left",	 <span style="color:#2980b9 !important">// left,center,right</span>
					soloArrowLeftValign:"bottom",<span style="color:#2980b9 !important">// top,center,bottom</span>
					soloArrowLeftHOffset:20,	 <span style="color:#2980b9 !important">// offset position from aligned position</span>
					soloArrowLeftVOffset:20,	 <span style="color:#2980b9 !important">// offset position from aligned position</span>

					soloArrowRightHalign:"right",	<span style="color:#2980b9 !important">// left,center,right</span>
					soloArrowRightValign:"bottom",	<span style="color:#2980b9 !important">// top,center,bottom</span>
					soloArrowRightHOffset:20,		<span style="color:#2980b9 !important">// offset position from aligned position</span>
					soloArrowRightVOffset:20,		<span style="color:#2980b9 !important">// offset position from aligned position</span>

					touchenabled:"on",
					onHoverStop:"on"

				});

			});	//ready

		&lt;/script&gt;
		</pre>

    <div style="width:100%;height:20px"></div>
    <h3>Change the Style of the Navigation Arrows via StyleSheet</h3>
    <p>You can add the following lines to your Style Sheet</p>
    <pre>
		<strong>.tparrows</strong> {

		    cursor: pointer;

		    background: rgba(0, 0, 0, 0.5) !important;
		    -webkit-border-radius: 5px;
		    border-radius: 5px;
		    width: 40px !important;
		    height: 40px !important;

		}

		<strong>.tparrows:before</strong> {
		    font-family: 'revicons';
			color: #fff;
		    font-style: normal;
		    font-weight: normal;
		    speak: none;
		    display: inline-block;
		    text-decoration: inherit;
		    margin-right: 0;
		    margin-top: 9px;
		    text-align: center;
		    width: 40px;
		    font-size: 20px;
		}

		<strong>.tparrows:hover</strong> {
		    color: #fff;
		}

		<strong>.tp-leftarrow:before</strong> {
		    content: '\e824';
		}

		<strong>tp-rightarrow:before</strong> {
		    content: '\e825';
		}

		<strong>.tparrows.tp-rightarrow:before</strong> {
		    margin-left: 1px;
		}

		<strong>.tparrows:hover</strong> {
		    background: rgba(0, 0, 0, 1) !important;
		}
		</pre>
    <div style="width:100%;height:20px"></div>
    <h3>Change the Style of the Bullets via StyleSheet</h3>
    <p>You can add the following lines to your Style Sheet</p>
    <pre>
		<strong>.tp-bullets.simplebullets.navbar</strong> {

		    height: 35px;
		    padding: 0px 0px;

		}
		<strong>.tp-bullets.simplebullets .bullet</strong> {
		    cursor: pointer;
		    position: relative !important;
		    background: rgba(0, 0, 0, 0.5) !important;
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		    -webkit-box-shadow: none;
		    -moz-box-shadow: none;
		    box-shadow: none;
		    width: 6px !important;
		    height: 6px !important;
		    border: 5px solid rgba(0, 0, 0, 0) !important;
		    display: inline-block;
		    margin-right: 2px !important;
		    margin-bottom: 14px !important;
		    -webkit-transition: background-color 0.2s, border-color 0.2s;
		    -moz-transition: background-color 0.2s, border-color 0.2s;
		    -o-transition: background-color 0.2s, border-color 0.2s;
		    -ms-transition: background-color 0.2s, border-color 0.2s;
		    transition: background-color 0.2s, border-color 0.2s;
		    float:none !important;
		}
		<strong>.tp-bullets.simplebullets .bullet.last</strong> {
		    margin-right: 0px
		}
		<strong>.tp-bullets.simplebullets .bullet:hover,
		.tp-bullets.simplebullets .bullet.selected</strong> {
		    -webkit-box-shadow: none;
		    -moz-box-shadow: none;
		    box-shadow: none;
			background: rgba(255, 255, 255, 1) !important;
			width: 6px !important;
		    height: 6px !important;
		    border: 5px solid rgba(0, 0, 0, 1) !important;
		}

		</pre>

</section>


</body>